<template>
  <div>
    <h1>富文本编辑器 (v5)</h1>
    <wang-editor
      ref="editor"
      v-model="content"
      @change="handleChange"
    />

    <div style="margin-top: 20px;">
      <h3>预览内容：</h3>
      <div v-html="content"></div>
    </div>

    <div style="margin-top: 20px;">
      <button @click="getHtml">获取HTML内容</button>
      <button @click="getText">获取纯文本内容</button>
      <button @click="setContent">设置内容</button>
    </div>
  </div>
</template>

<script>
import WangEditor from "@/components/WangEditor/index.vue";
import {getTempToken} from "@/api/files/file";
import '@wangeditor/editor/dist/css/style.css'


export default {
  components: {
    WangEditor
  },
  data() {
    return {
      content: '<h1>欢迎使用富文本编辑器 v5</h1><p>这里是一些初始内容...</p>'
    }
  },
  mounted() {
    //从后端请求的数据
    const loadContentFromServer = '<p><img src="<p><img src="http://cgxj74.natappfree.cc/file/download/dynamic/linking/1906557275233878018?token=eyJhbGciOiJIUzUxMiJ9.eyJmaWxlSWQiOiIxOTA2NTU3Mjc1MjMzODc4MDE4In0.P9EKKGw6uQLyUrmNs2Asn6QkGEKzQ0Qj31w_u-D-7sCnvQ5q8wxuPkHkeN_n_YXFSi9VSEt5ThNZYZZ-zd5BOw" alt="1906557275233878018" data-href="" style="width: 222.00px;height: 313.98px;"/></p>';

    this.setContent(loadContentFromServer)

  },
  methods: {
    handleChange(html) {
      console.log('内容变化:', html)
    },
    getHtml() {
      alert(this.content)
    },
    getText() {
      const tempDiv = document.createElement('div')
      tempDiv.innerHTML = this.content
      alert(tempDiv.textContent || tempDiv.innerText)
    },
    async setContent() {
      const loadContentFromServer = '<p><img src="http://cgxj74.natappfree.cc/file/download/dynamic/linking/1906525921825816577?token=eyJhbGciOiJIUzUxMiJ9.eyJmaWxlSWQiOiIxOTA2NTI1OTIxODI1ODE2NTc3In0.GkV-G66iZDk6Bb1pepsFWu_RnGIxoBWZ00VUBXYfXUKx_xzAc8pNtUqxvH1_vjLVNIa5mmqLQtfUpeZzBRkyGg" alt="1906557275233878018" data-href="" style="width: 194.00px;height: 274.38px;"/></p>';
      this.$refs.editor.setContent(loadContentFromServer);
    },

  }
}
</script>

